import React from 'react';
import { StickyContainer } from 'react-sticky';
import { connect } from 'umi';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      htmlText: '',
    };
  }

  componentDidMount() {
    localStorage.setItem('test', 'xxxx');
    const { htmlText, cssText, jsText } = this.props.editorModel;
    this.setState({ htmlText });
    this.loadCssString(cssText);
    this.loadScriptString(jsText);
    this.getData({
      productIds: [
        '2d68e086e4594546907942f9a75fd95c',
        '1a7e94662024499d9f72f19015973229',
        '2a9d37f06b10453192d7e2454e874dd2',
      ],
      promotion: null,
      type: '',
    });
  }

  // 验证 api
  getData = async (payload: any) => {
    const data = await this.props.dispatch({
      type: 'editorModel/getData',
      mTitle: 'listData',
      url: 'getUrl',
      payload,
    });
    console.log('data', data);
  };

  componentWillReceiveProps(nextProps: any, nextContext: any) {
    const { htmlText, jsText, cssText } = nextProps.editorModel;
    if (cssText !== this.props.editorModel.cssText) {
      this.loadCssString(cssText);
    }
    if (jsText !== this.props.editorModel.jsText) {
      this.loadScriptString(jsText);
    }

    if (htmlText !== this.props.editorModel.htmlText) {
      this.setState({ htmlText });
    }
  }

  // 动态插入js 文件
  loadScriptString = (code: string) => {
    this.removeNode('qhAutoJs');
    let script = (document as any).createElement('script');
    script.type = 'text/javascript';
    script.id = 'qhAutoJs';
    try {
      script.appendChild((document as any).createTextNode(code));
    } catch (ex) {
      script.text = code;
    }
    (document as any).body.appendChild(script);
  };

  // 动态插入文本css
  loadCssString = (code: string) => {
    this.removeNode('qhAutoCss');
    let style = (document as any).createElement('style');
    style.type = 'text/css';
    style.rel = 'stylesheet';
    style.id = 'qhAutoCss';
    try {
      //for Chrome Firefox Opera Safari
      style.appendChild(document.createTextNode(code));
    } catch (ex) {
      //for IE
      style.styleSheet.cssText = code;
    }
    let head = document.getElementsByTagName('head')[0];
    head.appendChild(style);
  };

  // 移除指定dom id
  removeNode = (id: string) => {
    let node = document.getElementById(id);
    if (node) {
      node.remove();
    }
  };

  //  跳转对应子应用
  onClickApp = (param) => {
    console.log('param', param);
  };

  handleScriptCreate() {
    this.setState({ scriptLoaded: false });
  }

  handleScriptError() {
    this.setState({ scriptError: true });
  }

  handleScriptLoad() {
    this.setState({ scriptLoaded: true, scriptStatus: 'yes' });
  }

  // todo title 下拉

  // todo 登录
  render() {
    // todo 添加登录操作
    const { htmlText } = this.props.editorModel;

    return (
      <StickyContainer>
        {/*登录*/}
        <div
          dangerouslySetInnerHTML={{
            __html: htmlText,
          }}
        />

        {/*footer*/}
      </StickyContainer>
    );
  }
}

export default connect(({ editorModel }) => ({
  editorModel,
}))(App);
